<template>
	<view style="margin-top: 60rpx;">
		<view class="fenlei">
			<view class="fenlei-list">
				<view style="height: 600px;">
					<view v-for="(item,index) in fenleis" :class="{'active': index==n? true:false}" @click="change(index,item.id)" class="lalala"><a>{{item.gname}} </a></view>
				</view>
			</view>
			<view class="bigbox">
				<view id="header">
					<view class="fenlei-box" :class="{'erjiactive':n2==-1?true:false}" @click="showAllGoods()">
						<image src="../../static/xielian.jpg" alt="">
						<view>全部</view>
					</view>
					<view class="fenlei-box" v-for="(item,i) in childrens" @click="getnext(item.id,i)" :class="{'erjiactive':i==n2?true:false}">
						<image :src="switchImg(item.icon)" alt="" />
						<view>{{item.gname}}</view>
					</view>
				</view>
				<view class="" id="content" >
					<view class="goods-box" v-for="item in goods">
						<view :gid="item.gid" @click.stop="goDetails(item.gid,event)" class="huanhang">
							<view>
								<image :src="switchImg(item.gimages)" class="goods-img" alt="" />
							</view>
							<view class="goods-info">
								<view>{{item.gname}}</view>
								<view class="goods-price">￥{{item.gprice}}</view>
								<view>销售数量:{{item.gsellnum}}</view>
							</view>
						</view>
					</view>
					<view class="nomore" v-show="nomore">没有数据了</view>
				</view>
			</view>
		</view>
		<!-- <u-tabbar v-model="current" :list="list" :mid-button="false"></u-tabbar> -->
		<view class="tabbar">
			<view style="text-align: center;" @click="tabbarPage(0)">
				<uni-icons type="home" size="20"></uni-icons>
				<view>首页</view>
			</view>
			<view style="text-align: center;" @click="tabbarPage(1)">
				<uni-icons type="map" size="20"></uni-icons>
				<view>联盟商家</view>
			</view>
			<view style="text-align: center;color: #FF7900;">
				<uni-icons type="list" color="#FF7900" size="20"></uni-icons>
				<view>分类</view>
			</view>
			<view style="text-align: center;" @click="tabbarPage(3)">
				<uni-icons type="cart" size="20"></uni-icons>
				<view>购物车</view>
			</view>
			<view style="text-align: center;" @click="tabbarPage(4)">
				<uni-icons type="person" size="20"></uni-icons>
				<view>个人中心</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fenleis:[],  	// 一级分类
				childrens:[],  // 二级分类
				allgoods:[],      // 所有的商品
				goods:[],		// 点击分类展示的商品
				typeid:1,      // 点击分类的id
				typeid2:0,		// 二级分类的id
				n:0,           // 一级目录下标
				page:1,        // 分页
				nomore:false,	// 没有数据了
				n2:-1,			// 二级目录下标,-1表示全部
				list: [{
						iconPath: "home",
						selectedIconPath: "home-fill",
						text: '首页',
						customIcon: false,
						pagePath: "/pages/jifen/index"
					},
					{
						iconPath: "grid",
						selectedIconPath: "grid-fill",
						text: '联盟商家',
						customIcon: false,
						pagePath: "/pages/jifen/merchant/merchantList"
					},
					{
						iconPath: "coupon",
						selectedIconPath: "coupon-fill",
						text: '分类',
						customIcon: false,
						pagePath: "/pages/jifen/goods/goodsFenlei"
					},
					{
						iconPath: "shopping-cart",
						selectedIconPath: "shopping-cart-fill",
						text: '购物车',
						customIcon: false,
						pagePath: "/pages/jifen/cart/cart"
					},
					{
						iconPath: "account",
						selectedIconPath: "account-fill",
						text: '个人中心',
						customIcon: false,
						pagePath: "/pages/jifen/center/center"
					},
				],
				current: 2
			}
		},
		onLoad() {
			// 请求一级菜单
			this.$http.get('/category/types', {
				tid: 0,
			}).then(res => {
				this.fenleis = res.data.data;
				this.childrens=this.fenleis[this.n].children;
				for(let i=0;i<res.data.data.length;i++){
					this.allgoods.push(res.data.data[i].goods);
				}
				this.goods=this.allgoods[this.n];
			})
		},
		methods: {
			//底部tab跳转
			tabbarPage(index){
				uni.redirectTo({
					url:index==0?'../index':(index==1?'../merchant/merchantList':(index==3?'../cart/cart':'../center/center'))
				})
			},
			switchImg(img){
				if(img.length>0)
					return this.host+img;
				else
					return '../../static/index/gm.png';
			},
			change(i,d){
				this.goods=[]
				this.n=i;
				this.n2=-1;
				this.typeid=d;
				// this.getAllGoods()	;
				this.childrens=this.fenleis[i].children;
				this.goods=this.allgoods[this.n];
			},
			goDetails(id,e){
				uni.navigateTo({
					url:'../goods/goodsDetail?gid='+id
				})
			},
			getnext(id,i){
				this.page=1;
				this.n2=i;
				this.typeid2=id;
				this.nomore=false;
				this.goods=[];
				this.getGoodsByType(id);
			},
			showAllGoods(){
				this.goods=this.fenleis[this.n].goods;
			},
			getGoodsByType(id){
				// http://127.0.0.1:8080/xieliangoods?p=selectTypeGoods
				this.$http.get("/category/types", {
					tid:id,
					page: this.page,
					limit:50
				}).then(res=>{
					if(res.data.data.length>0){
						this.goods=this.goods.concat(res.data.data[0].goods);
					}else{
						this.nomore=true;
					}
				})
			},
		},
	}
</script>

<style>
	.tabbarImage{
		width: 20px;
		height: 20px;
	}
	.tabbar{
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		flex-direction: row;
		-webkit-box-align: center;
		align-items: center;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 998;
		box-sizing: content-box;
		justify-content: space-around;
		background-color: white;
		font-size: 11px;
		padding: 20rpx 0 20rpx 0;
		border-top: 1rpx #DCDFE6 solid;
	}
	
	.lalala{
		padding: 5px 0px;
	}
	.fenlei a{
		display: block;
		font-size: 16px;
		height: 30px;
		line-height: 30px;
		padding-left: 20px;
		/*text-align: center;*/
	}
	.active{
		background-color: white;
	}
	.active a{
		border-left: 2px solid black;
	}
	.fenlei-list{
		width: 6rem;
		background:#f0f3f8;
		min-height: 600px;
		max-height: 100%;
		overflow: auto;
	}
	.fenlei-list .active a{
		font-weight: bold;
	}
	.fenlei-box{
		width: 6.25rem;
		text-align: center;
		margin-right: 10px;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
	}
	#header .fenlei-box{
		width: 7rem;
		text-align: center;
	}
	.fenlei-box image{
		height: 60px;
		width: 50px;
		display: block;
		margin: auto;
	}
	.goods-box{

	}
	.fenlei-box p{
		line-height: normal;
		text-align: center;
		overflow:hidden;/*隐藏文字*/
		text-overflow:ellipsis;/*显示 */
		white-space:nowrap;/*不换行*/
	}
	.fenlei{
		display: flex;
		justify-content: flex-start;
		height: 100%;
		padding-bottom: 110rpx;
	}
	.bigbox{
		/*margin-left: 10px;*/
		width: 80%;
		/*padding: 12px;*/
		background: #f0f0f0;
		padding-top: 0px;
		overflow: auto;
	}
	.bigbox-head{
		margin-top: 20px;
	}
	.bigbox-head span{
		font-weight: bold;
		font-size: 1.125rem;
	}
	.bigbox-head img{
		width: 1.875rem;
	}
	#header{
		width: 26rem;
		overflow: auto;
		display: flex;
		background-color: white;
		flex-wrap: nowrap;
	}
	#header p{
		font-size: 16px;
	}
	#content{
		justify-content: left;
		height: 89%;
		overflow: auto;
	}
	#content .nomore{
		text-align: center;
	}
	.goods-box>div{
		display: flex;
		padding: 10px;
	}
	.goods-box img{
		max-width: 100px;
	}
	.goods-box{
		background-color: white;
		margin-top: 5px;
	}
	.goods-info{
		display: flex;
		margin-left: 16px;
		flex-direction: column;
		justify-content: space-between;
	}
	.erjiactive{
		color: #5d8dd7;
	}
	.goods-box .goods-img{
		border-radius: 8px;
		height: 80px;
		width: 80px;
	}
	.goods-box .goods-price{
		color: #c02334;
		margin-top: 20px;
		font-weight: bold;
	}
	.goods-info p{
		color: #585858;
	}
	.huanhang{
		display: flex;
	}
</style>
